<template>
  <div class="prepare-edit">
    <div class="header">
      <div class="name">{{ data.lessonName }}</div>
      <div class="time">{{ lessonData.length > 0 ? '上次保存时间：' + lessonData[0].modifyTime : '' }}</div>
      <div class="btns">
        <el-tooltip class="item" effect="light" placement="bottom" :disabled="tipsDisabled">
          <template #content>
            <span v-if="currentIndex === 0">精准备课</span>
            <span v-if="currentIndex === 1">生成标准导学案</span>
            <span v-if="currentIndex === 2">保存并返回</span>
          </template>
          <el-button round @click="tipsDisabled = true,nextCurrent()" v-if="currentIndex!==2" :disabled="currentIndex === 1 && data.status !== 3">下一步</el-button>
          <el-button round @click="close"  v-else>保存</el-button>
        </el-tooltip>
        <el-button round v-if="currentIndex === 1 && data.status === 0 && prepareType !== 1" @click="submit" v-loading="submitLoad" >提交</el-button>
        <el-button round v-if="currentIndex === 1 && data.status === 1 || prepareType === 1" @click="submit" v-loading="submitLoad" >待审核</el-button>
        <el-button round v-if="currentIndex === 1 && data.status === 2 && prepareType !== 1" @click="submit" v-loading="submitLoad" >审核未通过</el-button>
        <el-button round v-if="currentIndex === 1 && data.status === 3 && prepareType !== 1" @click="submit" v-loading="submitLoad" >审核已通过</el-button>
      </div>
    </div>
    <div class="content">
      <div class="prepare-content">
      <div class="prepare-steps">
        <ul>
          <li
            v-for="(step, idx) in ['标准导学案', '精准备课', '教学总结']"
            :key="step"
            :class="{ 'is__current': currentIndex === idx, 'is__complete': finished >= idx }"
            :data-index="idx + 1"
            @click="stepClick(idx)"
          >
            <i class="el-icon-check" />
            <span>{{ step }}</span>
          </li>
        </ul>
      </div>
      <div class="prepare-main" v-if="currentIndex === 0" v-loading='mainLoading'>
        <StandardComponents :listData="data" v-if="lessonData.length === 0" @step-change="stepChange($event)"/>
        <StandardDataComponents :lessonData="lessonData" :listData="data" v-else  @step-change="stepChange($event)"/>
      </div>
      <div class="prepare-main" v-else-if="currentIndex === 1">
        <AccurateComponent />
      </div>
      <div class="prepare-main" v-else-if="currentIndex === 2">
        <Summary :data="data" />
      </div>
      <div class="prepare-preview" v-else></div>
    </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, ref, inject, onMounted } from 'vue'
import $ from '$'
import StandardComponents from './components/standard.vue'
import StandardDataComponents from './components/standard-data.vue'
import AccurateComponent from './accurate/index.vue'
import Summary from './summary/index.vue'
import { ElMessage } from 'element-plus'
import store from './../store'
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  components: { StandardComponents, StandardDataComponents, AccurateComponent, Summary },
  setup (props) {
    let [ currentIndex, setCurrent ] = $.useState(props.data.step - 1);
    $.emitter.on('set-current', () => setCurrent(0))

    let tipsDisabled = ref(false)
    let close = inject("close");
    let [ finished ] = $.useState(-1);
    let submitLoad = ref(false)
    let lessonData = ref([])
    let mainLoading = ref(true)
    let checkedData: any[] = []
    //isReplay 是否重新调用该接口
    $.emitter.on('standard-init', (isReplay) => request(isReplay))
    const request = (replay?) => {
      store.commit('set_prepare_data', props.data)
      $.http.post('/admin/lessonTimes/queryContent',{ lessonId: props.data.type === 1 ? props.data.contractId : props.data.lessonId }).then((res) => {
        if (res.result) {
          if (replay || props.data.step === 2) {
            checkedData = res.json.filter(p => p.lessonThirdId === props.data.thirdId)
            store.commit('set_class_data', checkedData[0])
          }
          lessonData.value = res.json
          mainLoading.value = false
        }
      })
    }
    request()
    const nextCurrent = () => {
      if (currentIndex.value < 1) {
        checkedData.length === 0 && ElMessage.warning('请选择课次后进行下一步！');
        checkedData.length === 1 && setCurrent(1)
      } else if (currentIndex.value === 1) {
        props.data.status !== 3 && ElMessage.warning('请审核通过后进行下一步！');
        props.data.status === 3 && setCurrent(2)
      }
      setTimeout(() => {
       tipsDisabled.value = false
      }, 100);
    }
    const stepChange = (data) => {
      setCurrent(1)
    }
    const stepClick = (idx) => {
      // if (idx === 0) {
      //   setCurrent(idx)
      // }
    }
    let handoutIdStore = computed(() => store.state.handoutId)
    let classData = computed(() => store.state.classData)
    let directData = computed(() => store.state.directData)
    // let formData = computed(() => store.state.formData)
    let prepareType = ref()
    const submit = async() => {
      console.log(classData.value, directData.value)
      if (classData.value || directData.value !== null) {
        submitLoad.value = true
        let auditId = null
        let res = await $.http.post('/admin/lessonAudit/queryOne', { lessonThirdId: props.data.id })
        if(res.result && res.json) { auditId = res.json.id; }
        let params = {
          ...props.data,
          lessonId: props.data.type === 1 ? props.data.contractId : props.data.lessonId,
          indexId:classData.value? classData.value.id : checkedData.length ? checkedData[0].id : props.data.id,
          title: classData.value ? classData.value.indexName ? classData.value.indexName : null : null,
          handoutId: classData.value ? !classData.value.indexName ? classData.value.child.handoutId : null : handoutIdStore.value,
          lessonThirdId: props.data.id,
          classTime: props.data.startDate,
          creatorId: null,
          id: auditId,
        }
        $.http.post('/admin/lessonInfo/saveOrUpdate', { id: props.data.id, status: 1, step: 2 })
        $.http.json('/admin/lessonAudit/save', params).then((res) => {
          if (res.result) {
            submitLoad.value = false
            ElMessage.success('提交成功')
            $.emitter.emit('prepare-init-data')
            prepareType.value = 1
          } else {
            ElMessage.warning(res.msg)
          }
        })
        classData.value && $.http.post('/admin/lessonTimes/saveOrUpdate', { id: classData.value.id, checked: 1, lessonThirdId: props.data.thirdId }) //更新已备课 checked：1 已选中课次
      } else {
        ElMessage.warning("请添加讲义后提交！")
      }
    }

    return {
      currentIndex, setCurrent, finished, lessonData, request, mainLoading, close, tipsDisabled,
      nextCurrent, stepChange, stepClick, submit, handoutIdStore, submitLoad, classData, ElMessage, prepareType, directData
    }
  }
}
</script>
<style lang="scss" scoped>
$mainWidth: 1120px;
.prepare-edit {
  background: #F4F5F9;
  height: 100%;
  overflow: auto;
  :deep(.el-loading-mask) {
    border-radius: 20px;
  }
  .header {
    background: $--color-primary;
    padding: 0 80px;
    display: flex;
    height: 60px;
    line-height: 60px;
    color: #fff;
    .time {
      margin-left: 15px;
    }
    .btns {
      margin-left: auto;
    }
  }
  .content {
    height: calc(100% - 100px);
  }
  .prepare-content {
    display: flex;
    flex-direction: column;
    width: $mainWidth;
    flex: 1 1 60px;
    margin: 20px auto 10px;
    height: 100%;
    .prepare-main {
      padding: 20px 30px;
      background: #fff;
      box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, .08);
      border-radius: 6px;
      border: 1px solid #EBF0FC;
      height: 100%;
      min-height: 500px;
      overflow: auto;
      & > div {
        height: 100%;
      }
    }
    .prepare-preview {
      display: flex;
      flex: 1 1 70px;
      overflow: hidden;
    }
  }
  .prepare-steps {
    padding: 15px 130px;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px -2px 6px 0px rgba(91, 125, 255, 0.08);
    ul {
      height: 40px;
      display: flex;
      overflow: hidden;
      li {
        flex: 1;
        color: #666;
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        background: #F0F2F5;
        position: relative;
        cursor: pointer;
        &.is__disabled {
          pointer-events: none;
        }
        &.is__complete {
          color: #fff;
          background: #99D6D2;
          i {
            display: inline-block;
          }
          &::before {
            display: none;
          }
        }
        &.is__current {
          color: #fff;
          background: #63C7C2;
        }
        &.is__complete,
        &.is__current {
          &::before {
            border-color: #fff;
          }
        }
        &:not(:first-child) {
          margin-left: -10px;
        }
        &:not(:last-child)::after {
          content: '';
          display: block;
          width: 32px;
          height: 30px;
          border-top: solid 10px #fff;
          border-right: solid 10px #fff;
          background: inherit;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 2;
          margin-right: -10px;
          border-radius: 6px;
          transform: rotateZ(45deg);
        }
        &:first-child {
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
        }
        &:last-child {
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
        }
        &::before {
          content: attr(data-index);
          display: inline-block;
          width: 26px;
          height: 26px;
          margin-top: 7px;
          margin-right: 10px;
          line-height: 22px;
          color: inherit;
          font-size: 14px;
          text-align: center;
          border: solid 2px #666;
          border-radius: 50%;
          box-sizing: border-box;
          vertical-align: top;
        }
        i {
          display: none;
          width: 26px;
          height: 26px;
          color: #99D6D2;
          line-height: 26px;
          text-align: center;
          font-weight: bold;
          background: #fff;
          vertical-align: top;
          margin: 7px 10px 0 0;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
